<template>
    <div className="home card">
        <blockquote class="text-warning" style="font-size: 14px">
            <div class="demo1">
                <el-button
                    size="large"
                    type="primary"
                    :icon="Document"
                    @click="router.push('/function1')"
                    >功能一</el-button
                >
                <el-button
                    size="large"
                    type="primary"
                    :icon="DocumentAdd"
                    @click="router.push('/function2')"
                    >功能二</el-button
                >
                <el-button
                    size="large"
                    type="primary"
                    @click="router.push('/easyv')"
                    >Easyv大屏</el-button
                >
            </div>
        </blockquote>
        <img :src="welcome" alt="welcome" />
    </div>
</template>

<script setup name="Index">
import { useRouter } from "vue-router";
import welcome from "@/assets/images/welcome01.png";
import { Document, DocumentAdd } from "@element-plus/icons-vue";
let router = useRouter();
</script>
<style scoped lang="scss">
.home {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 84px);
    img {
        width: 70%;
    }
    blockquote {
        padding: 10px 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
        position: absolute;
        left: 0;
        top: 0;
        .demo1 {
            --borderWidth: 3px;
            background: #d7e7ef;
            position: relative;
            border-radius: var(--borderWidth);
            padding: 20px;

            display: flex;
            flex-direction: column;
            color: white;
            font-family: "Raleway";
            font-size: 2.5rem;
            .el-button {
                margin: 20px 0;
            }
        }
        .demo1:after {
            content: "";
            position: absolute;
            top: calc(-1 * var(--borderWidth));
            left: calc(-1 * var(--borderWidth));
            height: calc(100% + var(--borderWidth) * 2);
            width: calc(100% + var(--borderWidth) * 2);
            background: linear-gradient(
                60deg,
                #f79533,
                #f37055,
                #ef4e7b,
                #a166ab,
                #5073b8,
                #1098ad,
                #07b39b,
                #6fba82
            );
            border-radius: calc(2 * var(--borderWidth));
            z-index: -1;
            animation: animatedgradient 3s ease alternate infinite;
            background-size: 300% 300%;
        }
        @keyframes animatedgradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    }
}
</style>
